<button class="button">
  Button
  <svg class="stars" viewBox="0 0 353 178" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M271 37.9914C289.244 33.3118 295.91 27.0769 299.991 9C305.137 29.7552 312.313 36.1206 331.104 40.1127C312.194 43.8462 305.081 49.4282 302.113 69.1041C296.925 50.845 289.057 44.9589 271 37.9914Z"></path>
<path d="M254.852 83.012C245.919 73.8857 239.998 72.0853 228 75.817C238.443 65.759 239.748 59.3874 235.721 47C244.325 56.8385 250.014 59.1225 262.574 54.195C253.611 63.4315 252.822 70.0469 254.852 83.012Z"></path>
<path d="M275.626 97.3875C278.179 88.2512 277.138 83.7734 270.281 77.4407C280.63 80.423 285.214 78.8959 291.687 71.7049C288.553 80.8937 289.197 85.4019 297.032 91.6517C287.761 89.3164 283.212 91.2658 275.626 97.3875Z"></path>
</svg>

</button>
<style>
/* From Uiverse.io by r7chardgh - Tags: button, hover, stars */
.stars {
  position: absolute;
  opacity: 0;
  top: -.3em;
  right: -.3em;
  height: 100%;
  transition: transform 300ms,opacity 150ms;
}

.stars :nth-child(n) {
  fill: #999;
}

.button {
  position: relative;
  cursor: pointer;
  padding: 1em 2em;
  border: 0;
  border-radius: .5em;
  font-weight: bolder;
  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 0 #999;
  background-color: #f1f1f1;
  color: #333;
}

.button:hover {
  transform: translate(.3em,-.3em);
  box-shadow: -.3em .3em #999;
}

.button:hover > .stars {
  opacity: 1;
  transform: translate(.2em,-.2em);
}

.button:active > .stars :nth-child(n) {
  fill: #ccc;
}
</style>
